import React, { useState } from 'react';

interface FormatConverterProps {
  onOutput: (output: string) => void;
}

const FormatConverter: React.FC<FormatConverterProps> = ({ onOutput }) => {
  const [formData, setFormData] = useState({
    oncogene: '',
    promptText: '',
    involve: ''
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const { oncogene, promptText, involve } = formData;

    if (!oncogene.trim() || !promptText.trim()) {
      alert("oncogene 和 promptText 不能为空");
      return;
    }

    const output = `{{.${oncogene} | prompt: "${promptText}" | involve: "${involve}"}}`;
    onOutput(output);
    clearFields();
  };

  const clearFields = () => {
    setFormData({
      oncogene: '',
      promptText: '',
      involve: ''
    });
  };

  return (
    <form onSubmit={handleSubmit} className="max-w-lg mx-auto bg-white p-8 rounded-lg shadow">
      <div className="mb-4">
        <label htmlFor="oncogene" className="block text-gray-700 text-sm font-bold mb-2">Oncogene:</label>
        <input
          type="text"
          name="oncogene"
          value={formData.oncogene}
          onChange={handleChange}
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          required
        />
      </div>
      <div className="mb-4">
        <label htmlFor="promptText" className="block text-gray-700 text-sm font-bold mb-2">Prompt Text:</label>
        <textarea
          name="promptText"
          value={formData.promptText}
          onChange={handleChange}
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          required
        />
      </div>
      <div className="mb-6">
        <label htmlFor="involve" className="block text-gray-700 text-sm font-bold mb-2">Involve:</label>
        <input
          type="text"
          name="involve"
          value={formData.involve}
          onChange={handleChange}
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        />
      </div>
      <div className="flex justify-between">
        <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
          提交
        </button>
        <button
          type="button"
          onClick={clearFields}
          className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
          清空
        </button>
      </div>
    </form>
  );
};

export default FormatConverter;